<template>
  <div>
    <h2>库存统计</h2>
    <div class="chart" id="threeChart">图表的容器</div>
  </div>
</template>
  
  <script>
import { inject, onMounted, reactive } from "vue";
export default {
  setup() {
    let data = reactive({});
    let chartData = reactive([]);
    let $echarts = inject("echarts");
    let $http = inject("axios");

    onMounted(() => {
      let myChart = $echarts.init(document.getElementById("threeChart"));
      getState().then(() => {
        myChart.setOption({
          legend: {
            top: "bottom",
          },
          tooltip: {
            show: true,
          },
          series: [
            {
              type: "pie",
              data: chartData,
              radius: [7, 85],
              center: ["50%", "38%"],
              //   label: {
              //     show: false,
              //     position: "inside",
              //   },
              roseType: "area",
              itemStyle: {
                borderRadius: 10,
              },
            },
          ],
        });
      });
    });

    async function getState() {
      data = await $http.get("/three/data");
      console.log("three", data);
      chartData = data.data.chartData.chartData;
      console.log(chartData);
    }

    return {
      getState,
      data,
      chartData,
    };
  },
};
</script>
  
  <style scoped>
.chart {
  height: 4.5rem;
}
h2 {
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  font-size: 0.25rem;
  text-align: center;
}
</style>